<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../00_static/js/vue.js" type="text/javascript"></script>
    <title>非单文件组件</title>
</head>

<body>
    <div id="app">
        <h2>学校名：{{name}}</h2>
        <h2>地址：{{address}}</h2>
        <School>1111</School>
    </div>
    <hr>
    <div id="app2">
        <Hello>2222</Hello>
    </div>
    <hr>
    <div id="app3">
        <app></app>
    </div>

    <script type="text/javascript">
        /*
            定义一个School组件：
                1.如何定义一个组件   -- 使用Vue.extend(options)去创建
                2.School的本质是一个构造函数，我们以后去写<School/>,Vue帮我们去 new School
                3.Vue.extend(options)中的options是配置对象，这个配置对象几乎和new Vue时的那个options一样，区别如下：
                    1）不能写el去指定容器
                        原因：所有组件实例最终要被一个vm所管理，vm中会指定好el,即：组件让哪个容器。
                    2）.data必须写成函数
                        原因：为了确保多个组件中的数据互不干扰
                    3）.组件的模板结构，要配置在template属性中：
                        3.1）值为html字符串，而且要用模板字符串
                        3.2）模板结构，必须只有一个根标签
                4.所有的组件定义后，必须注册才能使用，注册分为：全局注册，局部注册
                5.特别注意：
                    1）School确实是构造函数，但不是我们亲手写的School,是Vue.extend生成的
                    2）Vue.extend调用的返回值是VueComponent构造函数，所以new School其实就是在new VueComponent
                    3）所谓组件实例，就是VueComponent的实例，简称vc
                        所谓Vue实例，就是Vue创建的实例，简称vm
                6.重要的关系
                    VueComponent继承了Vue
            注册一个组件
                1.全局注册: Vue.component('组件名',组件)
                2.局部注册: 在new Vue中增加 components:{} 属性
        */

        //定义组件
        const School = Vue.extend({
            data() {
                return {
                    name: 'test1',
                    address: 'Beijing1'
                }
            },
            template: `
                    <div>
                        <h2>学校名：{{name}}</h2>
                        <h2>地址：{{address}}</h2>    
                    </div>
                `
        })
        const Hello = Vue.extend({
            template: `<h2>Hello</h2>`
        })
        const App = Vue.extend({
            components: { Xuexiao: School, Hello },
            template: `
            <Xuexiao></Xuexiao>
            <Hello></Hello>
            `
        })

        // 全局注册组件
        // Vue.component('School', School)

        new Vue({
            el: '#app',
            data: {
                name: 'test',
                address: 'Beijing'
            },
            components: {
                School
            }
        })
        // 局部注册组件
        new Vue({
            el: '#app2',
            components: {
                Hello
            }
        })
        new Vue({
            el: '#app3',
            components: {
                App
            }
        })
    </script>
</body>

</html>